<template>
  <div class="home">
    <div class="l-saas-rentcontrol-wrap">
      <div class="saas-rentcontrolmanage-body">
        <div class="saas-rentcontrolmanage-body-title">
          <div class="saas-rentcontrolmanage-body-image saas-rentcontrolmanage-body-image1"></div>
          <span><!-- react-text: 27 -->单元<!-- /react-text --><!-- react-text: 28 -->信息<!-- /react-text --></span></div>
        <div class="saas-rentcontrolmanage-body-divider"></div>
        <div class="saas-rentcontrolmanage-box-wrap">
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">620.00</p>
              <p class="font-size-largertext">总面积(m²)</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">0.00</p>
              <p class="font-size-largertext">已租面积(m²)</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">300.00</p>
              <p class="font-size-largertext">空置面积(m²)</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">0</p>
              <p class="font-size-largertext">自用面积(m²)</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">100</p>
              <p class="font-size-largertext">空置率</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item" style="flex: 2 1 0%;">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger"><!-- react-text: 54 -->0
              <!-- /react-text --><!-- react-text: 55 -->元/m².天<!-- /react-text --></p>
              <p class="font-size-largertext">在租均价</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">0</p>
              <p class="font-size-largertext">签约企业</p></div>
          </div>
        </div>
      </div>
      <div class="saas-rentcontrolmanage-body">
        <div class="saas-rentcontrolmanage-body-title">
          <div class="saas-rentcontrolmanage-body-image saas-rentcontrolmanage-body-image2"></div>
          <span><!-- react-text: 186 -->工位<!-- /react-text --><!-- react-text: 187 -->信息<!-- /react-text --></span>
        </div>
        <div class="saas-rentcontrolmanage-body-divider"></div>
        <div class="saas-rentcontrolmanage-box-wrap">
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">48</p>
              <p class="font-size-largertext">总数量</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">0</p>
              <p class="font-size-largertext">已租个数</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">48</p>
              <p class="font-size-largertext">空置个数</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">0</p>
              <p class="font-size-largertext">自用个数</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">100</p>
              <p class="font-size-largertext">空置率</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item" style="flex: 2 1 0%;">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger"><!-- react-text: 213 -->0
              <!-- /react-text --><!-- react-text: 214 -->元/个.月<!-- /react-text --></p>
              <p class="font-size-largertext">在租均价</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">0</p>
              <p class="font-size-largertext">签约企业</p></div>
          </div>
        </div>
      </div>
      <div class="saas-rentcontrolmanage-body">
        <div class="saas-rentcontrolmanage-body-title">
          <div class="saas-rentcontrolmanage-body-image saas-rentcontrolmanage-body-image3"></div>
          <span><!-- react-text: 224 -->车位<!-- /react-text --><!-- react-text: 225 -->信息<!-- /react-text --></span>
        </div>
        <div class="saas-rentcontrolmanage-body-divider"></div>
        <div class="saas-rentcontrolmanage-box-wrap">
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">100</p>
              <p class="font-size-largertext">总数量</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">0</p>
              <p class="font-size-largertext">已租个数</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">100</p>
              <p class="font-size-largertext">空置个数</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">0</p>
              <p class="font-size-largertext">自用个数</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">100</p>
              <p class="font-size-largertext">空置率</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item" style="flex: 2 1 0%;">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger"><!-- react-text: 251 -->0
              <!-- /react-text --><!-- react-text: 252 -->元/个.月<!-- /react-text --></p>
              <p class="font-size-largertext">在租均价</p></div>
          </div>
          <div class="saas-rentcontrolmanage-box-item">
            <div class="saas-rentcontrolmanage-box-item-content"><p class="font-size-larger">0</p>
              <p class="font-size-largertext">签约企业</p></div>
          </div>
        </div>
      </div><!-- react-text: 63 --><!-- /react-text -->
      <div class="l-saas-rentcontrol-parent">
        <div class="l-saas-rentcontrol-content"><span style="padding-left: 0px;"><span
          class="l-saas-rentcontrol-content-active">楼宇</span><span class="">停车场</span><!-- react-text: 69 -->
          <!-- /react-text --></span></div>
      </div>
      <div style="margin: 20px 0px;">
        <div class="ant-table-wrapper">
          <div class="ant-spin-nested-loading">
            <div class="ant-spin-container">
              <div class="ant-table ant-table-middle ant-table-bordered ant-table-scroll-position-left">
                <div class="ant-table-content">
                  <div class="ant-table-body">
                    <table class="">
                      <colgroup>
                        <col>
                        <col>
                        <col style="width: 100px; min-width: 100px;">
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                      </colgroup>
                      <thead class="ant-table-thead">
                      <tr>
                        <th class=""><span><!-- react-text: 95 -->楼宇名称<!-- /react-text --></span></th>
                        <th class="table-ellipsis"><span><!-- react-text: 98 -->所属项目<!-- /react-text --></span></th>
                        <th class="table-ellipsis"><span><!-- react-text: 101 -->总面积<!-- /react-text --></span></th>
                        <th class=""><span><!-- react-text: 104 -->总单元数<!-- /react-text --></span></th>
                        <th class=""><span><!-- react-text: 107 -->可租面积<!-- /react-text --></span></th>
                        <th class=""><span><!-- react-text: 110 -->可租单元数<!-- /react-text --></span></th>
                        <th class=""><span><!-- react-text: 113 -->在租面积<!-- /react-text --></span></th>
                        <th class=""><span><!-- react-text: 116 -->在租单元数<!-- /react-text --></span></th>
                        <th class=""><span><!-- react-text: 119 -->在租均价<!-- /react-text --></span></th>
                        <th class=""><span><!-- react-text: 122 -->空置面积<!-- /react-text --></span></th>
                        <th class=""><span><!-- react-text: 125 -->空置单元数<!-- /react-text --></span></th>
                        <th class=""><span><!-- react-text: 128 -->空置率<!-- /react-text --></span></th>
                      </tr>
                      </thead>
                      <tbody class="ant-table-tbody">
                      <tr class="ant-table-row  ant-table-row-level-0">
                        <td class=""><span class="ant-table-row-indent indent-level-0"
                                           style="padding-left: 0px;"></span><!-- react-empty: 146 -->
                          <!-- react-text: 147 -->2号楼<!-- /react-text --></td>
                        <td class="table-ellipsis"><span title="地球">地球</span></td>
                        <td class="table-ellipsis"><span title="620">620</span></td>
                        <td class=""><!-- react-text: 153 -->50<!-- /react-text --></td>
                        <td class=""><!-- react-text: 155 -->300<!-- /react-text --></td>
                        <td class=""><!-- react-text: 157 -->28<!-- /react-text --></td>
                        <td class=""><!-- react-text: 159 -->0<!-- /react-text --></td>
                        <td class=""><!-- react-text: 161 -->0<!-- /react-text --></td>
                        <td class=""><!-- react-text: 163 -->0<!-- /react-text --></td>
                        <td class=""><!-- react-text: 165 -->300<!-- /react-text --></td>
                        <td class=""><!-- react-text: 167 -->28<!-- /react-text --></td>
                        <td class=""><!-- react-text: 169 -->100<!-- /react-text --></td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div><!-- react-text: 134 --><!-- /react-text --><!-- react-text: 135 --><!-- /react-text --></div>
    <!--<div class="home_cont" id="home-echart">-->
    <!--</div>-->
  </div>
</template>

<script>
  import * as echarts from "echarts"
  import axios from "axios"
  import flare from "./flare"

  var ROOT_PATH =
    "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples"
  export default {
    name: "home",
    data() {
      return {
        userInfo: {}
      }
    },
    created() {
      this.userInfo = this._storage.get(this._userKey) ? this._storage.get(this._userKey) : {}
    },
    mounted() {
      // this.createChart();
    },
    methods: {
      createChart() {

        var chartDom = document.getElementById("home-echart")
        var myChart = echarts.init(chartDom)
        var option

        myChart.showLoading()
        // axios.get(ROOT_PATH + '/data/asset/data/flare.json').then(function (res) {
        let data = flare
        console.log("data", data)
        myChart.hideLoading()
        data.children.forEach(function (datum, index) {
          index % 2 === 0 && (datum.collapsed = true)
        })

        option = {
          tooltip: {
            trigger: "item",
            triggerOn: "mousemove"
          },
          series: [
            {
              type: "tree",
              data: [data],
              top: "1%",
              left: "7%",
              bottom: "1%",
              right: "20%",
              symbolSize: 7,
              label: {
                position: "left",
                verticalAlign: "middle",
                align: "right",
                fontSize: 9
              },
              leaves: {
                label: {
                  position: "right",
                  verticalAlign: "middle",
                  align: "left"
                }
              },
              emphasis: {
                focus: "descendant"
              },
              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750
            }
          ]
        }
        myChart.setOption(option)

        // option && myChart.setOption(option);

        // })

      },
      jumpAdmin(path) {
        // this.$router.push("/company/basic-data-manage");
        this.$router.push(`/${path}`)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(60deg, #d0cf17, #00dcff);
    animation: auto_change_color 10s linear infinite;
  }

  @keyframes auto_change_color {
    from {
      filter: hue-rotate(0);
    }
    to {
      filter: hue-rotate(360deg);
    }
  }

  .home_cont {
    width: 100%;
    height: 100%;
    /*text-align: center;*/
    /*margin: 100px auto;*/
  }

  .el-button--primary {
    margin-top: 100px;
  }


  .l-saas-rentcontrol-wrap {
    padding: 20px 20px 0;
  }

  .l-saas-rentcontrol-head {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 26px 0 14px;
  }

  .l-saas-rentcontrol-title {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    color: rgba(0, 0, 0, 0.85);
  }

  .l-saas-rentcontrol-title span {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #108ee9;
  }

  .l-saas-rentcontrol-parent {
    display: -webkit-flex; /* Safari */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px rgba(0, 0, 0, 0.15);
  }

  .l-saas-rentcontrol-content {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    color: rgba(0, 0, 0, 0.65);
  }

  .l-saas-rentcontrol-content span {
    padding: 8px 20px 7px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    cursor: pointer;
  }

  .l-saas-rentcontrol-content-active {
    color: #108ee9;
    border-bottom: solid 1px #108ee9;
  }

  .l-saas-rentcontrol-show {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 8px 0 7px;
    color: rgba(0, 0, 0, 0.65);
  }

  .l-saas-rentcontrol-show-content {
    display: -webkit-flex; /* Safari */
    display: flex;
    align-items: center;
    padding-right: 21px;
  }

  .l-saas-rentcontrol-show-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    border-radius: 1px;
  }

  .l-saas-rentcontrol-show-box {
    width: 8px;
    height: 8px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /*background-image: url("image/location-white.png");*/
  }

  .saas-rentcontrolmanage-body {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    padding-left: 24px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border: solid 1px rgba(0, 0, 0, 0.15);
  }

  .saas-rentcontrolmanage-box-wrap {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex: 1;
    justify-content: space-between;
  }

  .saas-rentcontrolmanage-body-title {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    margin: 20px 0 15px 0;
    padding-right: 23px;
    color: rgba(0, 0, 0, 0.85);
  }

  .saas-rentcontrolmanage-box-item {
    flex: 1;
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100px;
  }

  .saas-rentcontrolmanage-box-item-content {
    text-align: center;
  }

  .font-size-larger {
    margin-bottom: 4px;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.85);
  }

  .font-size-largertext {
    font-size: 14px;
  }

  .l-saas-rentcontrol-wrap {
    padding: 20px 20px 0;
  }

  .l-saas-rentcontrol-head {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 26px 0 14px;
  }

  .l-saas-rentcontrol-title {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    color: rgba(0, 0, 0, 0.85);
  }

  .l-saas-rentcontrol-title span {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #108ee9;
  }

  .l-saas-rentcontrol-parent {
    display: -webkit-flex; /* Safari */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px rgba(0, 0, 0, 0.15);
  }

  .l-saas-rentcontrol-content {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    color: rgba(0, 0, 0, 0.65);
  }

  .l-saas-rentcontrol-content span {
    padding: 8px 20px 7px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    cursor: pointer;
  }

  .l-saas-rentcontrol-content-active {
    color: #108ee9;
    border-bottom: solid 1px #108ee9;
  }

  .l-saas-rentcontrol-show {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 8px 0 7px;
    color: rgba(0, 0, 0, 0.65);
  }

  .l-saas-rentcontrol-show-content {
    display: -webkit-flex; /* Safari */
    display: flex;
    align-items: center;
    padding-right: 21px;
  }

  .l-saas-rentcontrol-show-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    border-radius: 1px;
  }

  .l-saas-rentcontrol-show-box {
    width: 8px;
    height: 8px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
</style>
